<!DOCTYPE html>
<html>
<head>
	<title>用户信息展示</title> 
	<style type="text/css">
		
		body{
			background-color: #fefefe;
			overflow: scroll;
		}

		.nav{
			float: left;
			width: 180px;
			position: relative;
		}
		ul{
			list-style-type: none;
			margin: 0;
			padding: 0;
			background-color: #f1f1f1;
		}

		a{
			display: block;
			padding-left: 0px;
			text-decoration: none;
			color:#555;
			padding: 8px 16px;
			font-size: 22px;
		}

		ol{
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		.dropdown-content a{
			padding-left: 20px;
		}

		.dropdown-content{
			display: none;
		}


		/*.drop:hover > a {*/
			/*background-color: #555;*/
			/*color: blue;*/
			/*border-left: 5px solid blue;*/
		/*}*/

		/*.drop:hover .dropdown-content{
			display: block;
		}*/

		.dropdown-content a:hover {
			background-color: #555;
			color:white;
		}

		.content{
			position:relative;
			overflow: hidden;
			padding-left: 10px;
		}


		.table{
			border-collapse: collapse;
			width: 100%;
		}

		#theader{
			background-color: white;
			display: table-row;
			border-bottom: 1px solid #b2d2f2;
		}

		th{
			text-align: center;
			padding: 10px 10px;
			color:#276ab0;
		}

		td{
			text-align: center;
			padding: 10px 10px;
			font-size: 15px;
			background-color: #f4f4f4;
		}

	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li class="first"><a onclick="dropClick()" href="javascript:void(0)">首页</a></li>
			<li  class="drop">
				<a onclick="dropClick(this)" href="javascript:void(0)">前台管理</a>
				<div class="dropdown-content">
					<ol>
						<li><a onclick="dropClick(this)" href="javascript:void(0)">&gt;用户信息</a></li>
						<li><a onclick="dropClick(this)" href="javascript:void(0)">&gt;添加用户</a></li>
						<li><a onclick="dropClick(this)" href="javascript:void(0)">&gt;删除用户</a></li>
					</ol>
				</div>
			</li>
			<li  class="drop">
				<a onclick="dropClick(this)" href="javascript:void(0)">后台管理</a>
				<div class="dropdown-content">
					<ol>
						<li><a onclick="dropClick(this)" href="javascript:void(0)">&gt;用户信息</a></li>
						<li><a onclick="dropClick(this)" href="javascript:void(0)">&gt;添加用户</a></li>
						<li><a onclick="dropClick(this)" href="javascript:void(0)">&gt;删除用户</a></li>
					</ol>
				</div>
			</li>
		</ul>

		<script type="text/javascript">
			function dropClick(obj){

				console.log(obj);
				console.log(obj.parentNode);

				// var list = document.getElementsByClassName('drop');
				// for(i in list){
				// 	list[i].firstChild.style = 'color:blue; border-left:1px solid blue';
				// 	// var d = document.getElementsByClassName('dropdown-content');
				// 	// d[0].style.display = 'block';
				// }
				if (obj.parentNode.children[1] == undefined) {
					return;	
				}

				var x = 0;
				var nodeList = document.getElementsByClassName('dropdown-content');
				for(var i in nodeList){
					console.log(i);
					var node = nodeList[i];
					console.log(node);
					if (node.parentNode.children[0] == obj) {
						console.log('相等');
						if(obj.parentNode.children[1].style.display == 'block'){
							obj.parentNode.children[1].style.display = 'none';
							obj.style = 'color:#555; border-left:none;';
						}else{
							obj.parentNode.children[1].style.display = 'block';
							obj.style = 'color:blue; border-left:5px solid blue';
						}
					}else {
							node.style.display = 'none';
							node.parentNode.children[0].style = 'color:#555; border-left:none;';
					}
				}
				
			}
		</script>

	</div>
	<div class="content">
		<table class="table">
		<tbody>
			<tr id="theader">
				<th>用户名</th>
				<th>邮箱</th>
				<th>手机号</th>
				<th>密码</th>
				<th>用户状态</th>
				<th>最后登录时间</th>
				<th>创建时间</th>
				<th>修改时间</th>
			</tr>
			<tr id = "tb-cell">
				<td>张三</td>
				<td>zhangsan@aa.com</td>
				<td>123456789</td>
				<td>asdsadasd</td>
				<td>启用</td>
				<td>2018-06-01</td>
				<td>2018-06-01</td>
				<td>2018-06-01</td>
			</tr>
		</tbody>

	</table>
	</div>


</body>
</html>